Modern CSS Features You Should Be Using Today

CSS has evolved dramatically in recent years, with powerful new features that solve long-standing design challenges. Many developers are still using outdated approaches or reaching for JavaScript solutions when modern CSS could handle the task more efficiently.

Container Queries: Beyond Media Queries

While media queries let us adapt layouts based on viewport size, container queries allow components to respond to their own container's size. This is perfect for reusable components that might appear in different contexts:

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

This approach means components can adapt based on their container's width rather than the viewport, making truly responsive components possible.

CSS Grid and Subgrid

CSS Grid revolutionized web layouts, but subgrid takes it further by allowing nested grids to participate in the parent grid's track sizing:

.main-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.card {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto;
}

With subgrid, you can align elements across different components without complex calculations or JavaScript interventions.

Custom Properties (CSS Variables)

CSS variables enable truly dynamic styling that was previously only possible with preprocessors or JavaScript:

:root {
  --primary-color: #5f4b8b;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
  border-radius: var(--border-radius);
}

.dark-theme {
  --primary-color: #a594d0;
}

Unlike preprocessor variables, CSS custom properties are dynamic and can be changed at runtime, enabling theming, responsive adjustments, and even animations without JavaScript.

Logical Properties

Logical properties make internationalization easier by describing layout in terms of flow direction rather than physical direction:

/* Old approach */
.box {
  margin-left: 1rem;
  padding-right: 2rem;
}

/* Better approach with logical properties */
.box {
  margin-inline-start: 1rem;
  padding-inline-end: 2rem;
}

When working with languages that read from right to left, logical properties automatically adapt without requiring separate stylesheets.

The Modern Box Model: aspect-ratio

The new aspect-ratio property solves the long-standing challenge of maintaining proportional dimensions:

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.profile-image {
  width: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

This elegant solution replaces complex percentage padding hacks that were previously needed to maintain aspect ratios.

Scroll Snap

Creating smooth scrolling experiences used to require JavaScript, but CSS scroll snap provides native functionality:

.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.carousel-item {
  scroll-snap-align: center;
  flex: 0 0 100%;
}

This creates touch-friendly, performant scrolling interfaces with minimal code.

Conclusion

Modern CSS has addressed many of the pain points that previously required JavaScript solutions or complex workarounds. By embracing these new features, you can write more maintainable code, improve performance, and reduce dependencies.

In my next post, I'll explore advanced CSS animation techniques that leverage these modern features to create engaging user experiences without sacrificing performance.